<template>
  <div class="box-answer-previe">
    <div class="status">
      您的得分:{{ score }}
      <span style="margin-left: 0.625rem" :style="{ color: statusColor }">
        {{ score >= 60 ? '合格' : '不合格' }}
      </span>
      <!-- 返回首页 -->
      <div class="box-btn">
        <div class="submit" @click="submit">返回首页</div>
      </div>
    </div>
    <!-- 占位符 -->
    <placeholder :height="80" />
    <div class="test-paper">
      <div class="questions" v-for="(item, index) in questionList" :key="item.id">
        <div class="single-question" v-if="item.type == 1">
          <div class="question">{{ index + 1 }}. {{ item.title }}</div>
          <div class="icon" v-if="item.answer"><img src="@/assets/img/right.png" alt="" /></div>
          <div class="icon" v-else><img src="@/assets/img/error.png" alt="" /></div>
          <div class="options" v-for="(optionItem, optionIndex) in item.question_option" :key="optionIndex">
            <el-radio v-model="you_selectedAnswer[index].option" :label="optionItem.option" @input="selectOption" disabled>
              <span>{{ optionItem.option }}. </span>
              <span>{{ optionItem.content }}</span>
            </el-radio>
          </div>
          <div class="detail">正确答案:{{ item.detail }}</div>
        </div>
        <!-- 多选题 -->
        <div class="multiple-question" v-if="item.type == 2">
          <div class="question">{{ index + 1 }}. {{ item.title }}</div>
          <div class="icon" v-if="item.answer"><img src="@/assets/img/right.png" alt="" /></div>
          <div class="icon" v-else><img src="@/assets/img/error.png" alt="" /></div>
          <div class="options" v-for="(optionItem, optionIndex) in item.question_option" :key="optionIndex">
            <el-checkbox-group v-model="you_selectedAnswer[index].option" @change="selectOption" disabled>
              <el-checkbox :label="optionItem.option">
                <span>{{ optionItem.option }}. </span>
                <span>{{ optionItem.content }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="detail">正确答案:{{ item.detail }}</div>
        </div>
        <!-- 判断题 -->
        <div class="judge-question" v-if="item.type == 3">
          <div class="question">{{ index + 1 }}. {{ item.title }}</div>
          <div class="icon" v-if="item.answer"><img src="@/assets/img/right.png" alt="" /></div>
          <div class="icon" v-else><img src="@/assets/img/error.png" alt="" /></div>
          <div class="options" v-for="(optionItem, optionIndex) in item.question_option" :key="optionIndex">
            <el-radio v-model="you_selectedAnswer[index].option" :label="optionItem.option" @input="selectOption" disabled>
              <span>{{ optionItem.option }}. </span>
              <span>{{ optionItem.content }}</span>
            </el-radio>
          </div>
          <div class="detail">正确答案:{{ item.detail }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      questionList: [],
      you_selectedAnswer: [],
      you_choice: ''
    }
  },
  computed: {
    ...mapState('score', { detailList: 'detailList', score: 'score' }),

    statusColor() {
      return this.score >= 60 ? '#1dd66c' : '#ff0000'
    }
  },
  methods: {
    selectOption() {},

    submit() {
      try {
        this.$router.replace('/')
      } catch (error) {
        console.log('错误: ', error)
      } finally {
        localStorage.removeItem('you_selectedAnswer')
        localStorage.removeItem('test-paper')
      }
    },

    // ABCD 排序 BACD -> ABCD
    sortString(str) {
      if (!str) return str
      return str.split('').sort().join('')
    },

    goBack() {
      this.$router.replace('/')
    }
  },

  created() {
    this.questionList = JSON.parse(localStorage.getItem('test-paper'))
    this.you_selectedAnswer = JSON.parse(localStorage.getItem('you_selectedAnswer'))
    this.questionList.forEach((item, index) => {
      item.answer = false
      item.detail = this.detailList[index].detail.detail
      if (this.sortString(this.you_selectedAnswer[index].option) == this.sortString(this.detailList[index].detail.answer)) {
        item.answer = true
      }
    })

    // 先把多选题的 答案变成数组 之后再提交再变回字符串
    this.you_selectedAnswer.forEach(item => {
      if (item.type == 2) {
        item.option = item.option.split('')
      }
    })
  },

  mounted() {
    if (window.history && window.history.pushState) {
      // 向历史记录中插入了当前页
      history.pushState(null, null, '/')
      window.addEventListener('popstate', this.goBack, false)
    }
  },

  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/global-style.scss';
@import '@/assets/css/global-var.scss';

::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  font-size: 1rem;
}

.box-answer-previe {
  background-color: $background_gray;
  height: 100vh;
}

.status {
  @include display-center;
  height: 3.75rem;
  font-size: 1.25rem;
  width: 60%;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.test-paper {
  @include position-center;
  top: 55%;
  height: 90vh;
  width: 60%;
  background: #fff;
  overflow-y: scroll;
  padding: 0.625rem;
}

.question {
  display: flex;
  align-items: center;
  height: 5rem;
  font-size: 1rem;
}

.icon {
  position: absolute;
  right: 0;
  top: 1.25rem;

  img {
    height: 1.875rem;
    width: 1.875rem;
  }
}

.options {
  text-align: left;
  margin-bottom: 2.5rem;
}

.detail {
  padding: 0.625rem;
  border-radius: 0.3125rem;
  background: #f8f8fa;
}

.box-btn {
  position: absolute;
  right: 0;
}

.submit {
  @include display-center;
  @include position-center;
  height: 3.125rem;
  width: 5.8125rem;
  border-radius: 0.625rem;
  color: #fff;
  background-color: $btn_blue;
  cursor: pointer;
}
</style>
